<template>
	<div class="main">
		<div class="title">院校剖析 
			<el-link @click="handle" class="addLink">（了解更多可点击）</el-link>
			<!-- <a href="https://www.dxsbb.com/news/list_240.html" >了解更多可点击</a> -->
			<div class="line"></div>
		</div>
		<div class="try">
			<el-tabs  v-model="activeName"  @tab-click="handleClick">
			    <el-tab-pane  label="985高校" name="0" ></el-tab-pane>
					<el-card  v-if="isZero">
						<el-table  :data="tableData"  stripe border style="width: 100%"
						:header-cell-style="{textAlign: 'center'}" :cell-style="{ textAlign: 'center' }" class="tablehead">
						   <el-table-column type='index' label="序号" width="200" class="tablecontent"></el-table-column>
						   <el-table-column  prop="collegeName"  label="985高校"  width="805"></el-table-column>
						   <!-- <el-table-column  prop="focusDiscipline"  label="双一流建设学科" v-if="show"></el-table-column> -->
						 </el-table>
						 <!-- <div class="block">
						 	<el-pagination  @current-change="handleCurrentChange"	:current-page="startIndex"  
							:page-size="pageSize"  layout="total, prev, pager, next" :total="total">
						 	</el-pagination>
						 </div> -->
					</el-card>
					
			    <el-tab-pane  label="211高校" name="1"></el-tab-pane>
					<el-card  v-if="isOne">
						<el-table  :data="tableData"  stripe border style="width: 100%"
						:header-cell-style="{textAlign: 'center'}" :cell-style="{ textAlign: 'center' }" class="tablehead">
						   <el-table-column type='index' label="序号" width="200"></el-table-column>
						   <el-table-column  prop="collegeName"  label="211高校"  width="805"></el-table-column>
						 </el-table>
						<!-- <div class="block">
						 	<el-pagination  @current-change="handleCurrentChange"	:current-page="startIndex"  
							:page-size="pageSize"  layout="total, prev, pager, next" :total="total">
						 	</el-pagination>
						 </div> -->
					</el-card>
					
				<el-tab-pane  label="双一流建设高校" name="2">
					<el-card v-if="isSecond">
						<el-table  :data="tableData"  stripe border style="width: 100%" 
						:header-cell-style="{textAlign: 'center'}" :cell-style="{ textAlign: 'center' }" class="tablehead">
						   <el-table-column type='index' label="序号" width="80"></el-table-column>
						   <el-table-column  prop="collegeName"  label="双一流建设高校"  width="320"></el-table-column>
						   <el-table-column  prop="focusDiscipline"  label="双一流建设学科" ></el-table-column>
						 </el-table>
						<!-- <div class="block">
						 	<el-pagination  @current-change="handleCurrentChange"	:current-page="qurey.startindex"  
							:page-size="qurey.pagesize"  layout="total, prev, pager, next">
						 	</el-pagination>
						 </div> -->
					</el-card>
				</el-tab-pane>
				
			</el-tabs>
		</div>
	</div>
</template>
<script>
	export default ({
		data() {
			return{
				schollClass: "",
				activeName: '0',
				
				tableData: [{
					path: '',
					collegeName0: '',
					collegeName1: '',
					collegeName2: '',
					focusDiscipline: ''
				}],
				// total: 0,
				
				// startIndex: 1, //第几页
				// pageSize: 30, // 每页多少条
				
				qurey: {
					"startindex": 1,
					"pagesize": 10
				},
				
				// show: true,
				path: '',
				isZero: true,
				isOne: false,
				isSecond: false,
			}
		},
		created() {
			this.handleClick()
		},
		methods: {
			handle() {
			    window.open("https://www.dxsbb.com/news/list_88.html", '_blank')
			},
			// handleCurrentChange(newpage) { //第几页
			// 	console.log(startIndex)
			// 	this.startIndex = newpage;
			// 	this.handleClick()
			// },
			handleCurrentChange(newstart) {
				this.qurey.startindex=newstart
				this.handleClick()
			},
			async handleClick(tab,event){
	
				console.log(tab.label)
				if(tab.name === '0'){
					this.isZero = true 
					this.isOne = false
					this.isSecond = false
					// this.schollClass='211建设高校'
					// this.show = false
					const {data: res}= await this.$axios.get(
					`${this.baseURL}/college985/focusCollege985`
					)
					this.tableData=res.data
					
				}
				else if(tab.name === '1'){
					this.isZero = false
					this.isOne = true
					this.isSecond = false
					// this.schollClass='211建设高校'
					// this.show = false
					const {data: res}= await this.$axios.get(
						`${this.baseURL}/college985/focusCollege211`
						)
						this.tableData=res.data
						console.log(this.tableData)
					
				}
				else if(tab.name === '2'){
					this.isZero = false
					this.isOne = false
					this.isSecond = true
					// this.schollClass='双一流建设高校'
					// this.show = true
					const {data: res}= await this.$axios.get(
					`${this.baseURL}/collegeFocusDiscipline/focusDiscipline`
					)
					this.tableData=res.data
					console.log(this.tableData)
				}
			

			},
		}
	})
</script>

<style scoped>
	.main {
		width: 100%;

	}
	.try{
		padding-left: 20px;
	}
	.el-tabs__nav-scroll{
		font-size: 40px;
	}
	.shcoollist {
		/* display:inline-block; */
		/* display:flex;
		justify-content: flex-start; */
		margin-top: 10px;
	}
	.el-tabs__nav-wrap::after {
		background-color: #FFFFFF;
		}
	.tablehead{
		font-size: 23px;
		font-weight:normal;
	}
	.try>>>.el-tabs__item{
		font-size: 20px!important;
	}
	.title {
		text-align: left;
		width: 100%;
		height: 62px;
		font-size: 24px;
		font-family: Noto Sans SC;
		font-weight: 700;
		text-align: left;
		color: #333333;
		margin-top: 15px;
		margin-left: 20px;
		position: relative;
	}
	.addLink{
		padding-left: 10px;
		font-size: 24px;
		margin-top: -5px;
		color:#33aaff;
	}
	
	.line {
		position: absolute;
		bottom: 0px;
		width: 1025px;
		height: 2px;
		background-color: rgba(51, 170, 255, .4);
	}
	.table{
		font-size: 22px;
	}
	.table>>>.el-table__row {
		cursor: pointer;
	}
	
	.el-tabs__item{
		font-size: 50px;
	}
	
	.shcoollist {
		margin-top: 10px;
	}
</style>